<template>
    <el-config-provider>
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            :width="1000"
            align-center
            destroy-on-close
            append-to-body
            class="dialogModel"
            @close="cancelHandle">
            <div class="dialogContent">
                <div class="dialogLeft">
                    <ZWTree v-model="currentGroupId" :fetch-api="treeFetchApi" />
                </div>
                <div class="dialogRight">
                    <div v-if="slots.content" class="slot-content">
                        <slot :group-id="currentGroupId" name="content"> </slot>
                    </div>
                    <ZWTableList
                        v-else
                        :search-options="searchOptions"
                        :table-options="tableOptions"
                        :group-id="currentGroupId"
                        :fetch-api="tableFetchApi" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="() => cancelHandle(true)">取消</el-button>
                    <el-button type="primary" @click="confirmHandle">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </el-config-provider>
</template>

<script setup lang="ts">
import { ref, watch, computed, provide, useSlots } from 'vue';
import type { PropType } from 'vue';
import { ElButton, ElDialog, ElConfigProvider } from 'element-plus';
import { TypeFetchApi } from './type';
import ZWTree from './components/ZWTree.vue';
import ZWTableList from './components/ZWTableList.vue';

defineOptions({
    name: 'ZwUnityKitTreeTableSelect'
});

const currentGroupId = ref<number>(0);
const radioSelectData = ref<any>(null);
const checkboxSelectData = ref<any[]>([]);
const slots = useSlots();

provide('currentGroupId', currentGroupId);

interface PropsType {
    modelValue: boolean; // 是否显示组件
    multiple: boolean; // 是否多选
    title: string; // 弹框标题
    treeFetchApi: PropType<TypeFetchApi | Array<any>>;
    tableFetchApi: PropType<TypeFetchApi | Array<any>>;
    searchOptions: Array<any>;
    tableOptions: Array<any>;
    rowKey: string;
    radioData: any;
}

const props = withDefaults(defineProps<PropsType>(), {
    modelValue: false,
    multiple: false,
    title: '选择朋友圈素材',
    treeFetchApi: () => [],
    tableFetchApi: () => [],
    searchOptions: () => [],
    tableOptions: () => [],
    rowKey: 'id',
    radioData: () => null
});

const emits = defineEmits<{
    (e: 'update:modelValue', isShow: boolean): void;
    (e: 'submit', val: any): void;
    (e: 'close'): void;
}>();

const dialogVisible = computed({
    set(val: boolean) {
        emits('update:modelValue', val);
    },
    get() {
        return props.modelValue;
    }
});

/**
 * @description: 获取选中的内容（单选）
 * @param {*} val
 * @return {*}
 */
const getRadioData = val => {
    radioSelectData.value = val;
};

provide('getRadioData', getRadioData);

/**
 * @description: 取消
 * @param {*} flag
 * @return {*}
 */
const cancelHandle = (flag?: boolean) => {
    dialogVisible.value = false;
    !flag && emits('close');
};

/**
 * @description: 确认
 * @return {*}
 */
const confirmHandle = () => {
    emits('submit', radioSelectData.value);
    cancelHandle(true);
};

watch(
    () => props.searchOptions,
    () => {
        provide('searchOptions', props.searchOptions);
    },
    { immediate: true, deep: true }
);
watch(
    () => props.tableOptions,
    () => {
        provide('tableOptions', props.tableOptions);
    },
    { immediate: true, deep: true }
);
watch(
    () => props.multiple,
    () => {
        provide('multiple', props.multiple);
    },
    { immediate: true, deep: true }
);
watch(
    () => props.rowKey,
    () => {
        provide('rowKey', props.rowKey);
    },
    { immediate: true, deep: true }
);
watch(
    () => props.radioData,
    () => {
        provide('radioData', props.radioData);
    },
    { immediate: true, deep: true }
);
</script>

<style lang="scss">
.dialogModel {
    .el-dialog__header {
        margin: 0;
        padding: 16px;
        border-bottom: 1px solid #eaeaea;

        .dialog_header,
        .el-dialog__title {
            line-height: 1;
            font-size: 16px;
        }

        .el-dialog__headerbtn {
            top: 0;
            width: 50px;
            height: 50px;
            font-size: 20px;

            .el-icon {
                margin-top: 2px;
            }
        }
    }

    .el-dialog__body {
        padding: 10px 0;
        height: 560px;
    }

    .el-dialog__footer {
        padding: 10px 16px;
        border-top: 1px solid #eaeaea;
    }
}
</style>

<style lang="scss" scoped>
@import './Index';
</style>
